<template>
  <page-wrap back dark hide-tab title="上传资料" stayStill>
    <view class="work-cert">
      <view class="cinfo u-p-b-32 u-border-bottom">
        <view class="cinfo-lable u-m-b-24 u-font-28">企业名称</view>
        <view class="cinfo-name u-font-32">{{cinfo.company_name}}</view>
      </view>
      <view class="upload">
        <view class="label u-m-b-24">
          {{ applyType == 1? '营业执照': '在职证明' }}
          </view>
        <view class="upload-wrap">
          <u-upload ref="uUpload"
            :max-size="2 * 1024 * 1024"
            max-count="1" 
            :action="uploadAction"
            upload-text="上传图片"
            :custom-btn="true"
            class="u-m-b-24">
              <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
                <image :src="uploadImg" mode="" class="upload-img" />
                <view>上传图片</view>
              </view>
            </u-upload>
            <view v-if="applyType == 1" class="tips">*提示：请确保营业执照清晰</view>
            <view v-else class="tips">*提示：可上传加印公章的工牌、在职证明</view>
        </view>
      </view>

      <view class="bottom">
        <view class="btn btn-primary btn-join" @click="submit"> 提交审核 </view>
        <view class="tips" @click="handleCall('400-884-1001')">
          <text>客服热线：<text class="tel">400-884-1001</text>（8:00-18:00）</text>
        </view>
      </view>
      <u-icon name="more-dot-fill" size="52" class="btn-more" @click="showMore = true"></u-icon>
    </view>
    <MoreAction :show.sync="showMore" />
  </page-wrap>
</template>

<script>
import { uploadAction, uploadBaseUrl, } from "@/api/index";
import { addAudit } from "@/api/modules/company";
import { isCompanyPerson } from "@/api";
import personMixin from '../mixins/personDetail';
import MoreAction from '../components/moreAction.vue';

export default {
  mixins: [personMixin],
  components: {
    MoreAction,
  },
  data() {
    return {
      cinfo: {},
      uploadAction,
      uploadBaseUrl,
      uploadImg: this.$imgBase + 'company/upload.png',
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      showMore: false,
      applyType: 2, // 提交资质类型
    }
  },
  onLoad(opt) {
    if(opt && opt.type) {
      this.applyType = opt.type;
    }
  },
  mounted() {
    this.getData();
    this.getPersonDetail(); // from personMixin
    // this.cinfo = uni.getStorageSync('joinCompanyInfo')
  },
  methods: {
    getData() {
      let params = {
        person_id: this.personId,
      }
      isCompanyPerson(params).then(res => {
        if(res && res.code == 200) {
          this.cinfo = res.info
        }
      })
    },

    submit() {
      let files = [];
      // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
      files = this.$refs.uUpload.lists.filter(val => {
        return val.progress == 100;
      })
      // 如果您不需要进行太多的处理，直接如下即可
      // files = this.$refs.uUpload.lists;
      let imgList = []
      files.forEach(ele => {
        if(ele.response) {
          imgList.push(uploadBaseUrl + ele.response);
        }
      })

      if(imgList.length) {
        if(this.applyType == 2) {
          this.subscribeMessage(imgList[0]);
        } else {
          this.addAudit(imgList[0]);
        }
      } else {
        const tipsText = '图片未上传成功，请稍后再试';
        uni.showToast({
          title: tipsText,
          icon: 'none'
        })
      }
		},
    
    // 订阅企业认证审核通知
    subscribeMessage(img) {
      uni.requestSubscribeMessage({
        tmplIds: ['tHsfqUFirSvgCxvqWU1o7FtkhaLI5h-BSU8lr9W8Zow'],
        complete: (res)=> {
          console.log(res)
          this.addAudit(img)
        },
      });
    },
    // 提交认证
    addAudit(img) {
      let params = {
        company_id: this.cinfo.company_id,
        person_id: this.personId,
        regInfoArr: JSON.stringify({
          cname: this.cinfo.company_name,
          iname: this.userInfo.iname,
          pname: this.userInfo.iname,
          idcard: ' ', // 暂无个人认证
          pavatar: this.userInfo.pic || ' ',
          resume_receiv_email: this.userInfo.email,
          mobile: this.userInfo.shouji, // from personMixin
          apply_data: img,
          apply_data_type: this.applyType, //认证类型：1.营业执照 2 在职证明 3 工牌 4 名片
        })
      };
      uni.showLoading();
      addAudit(params).then(res => {
        uni.hideLoading();
        if(res && res.code == 200) {
          uni.showToast({
            title: res.status_desc || '提交成功',
            icon: 'none'
          });

          if(this.applyType == 1) {
            uni.navigateTo({
              url: '/pagesSub/company/workCert/index?type=2',
            });
            return;
          } else {
            setTimeout(() => {
              uni.reLaunch({
                url: '/pagesSub/company/auditResults/index?type=1',
              });
            }, 1000);
          }
        } else {
          uni.hideLoading();
          uni.showToast({
            title: res.status_desc || '提交失败',
            icon: 'none'
          })
        }
      }).catch(err => {
        uni.hideLoading();
      })
    },
    // 拨打电话
    handleCall(mobile) {
      uni.makePhoneCall({
        phoneNumber: mobile,
      });
    },
    
  }
};
</script>

<style lang="scss" scoped>
.work-cert {
  flex: 1;
  padding: $uni-spacing-col-big;
  background-color: $uni-bg-color;
  .cinfo {
    margin-bottom: $uni-spacing-col-big;
    &-name {
      font-weight: bold;
      color: #000;
    }
  }
  .upload {
    color: $uni-text-color-333;
    .slot-btn {
      margin: 10rpx;
      height: 140rpx;
      padding: 20rpx;
      font-size: 24rpx;
      color: #666;
      border: 2rpx dashed #666;
      border-radius: $uni-border-radius-lg;
      text-align: center;
    }
    .upload-img {
      display: inline-block;
      margin-bottom: 10rpx;
      width: 44rpx;
      height: 44rpx;
    }
    .tips {
      font-size: $uni-font-size-sm;
      color: $uni-text-color-999;
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: $uni-bg-color;
    padding: 32rpx;
    padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
    .btn {
      width: 100%;
      margin-bottom: 40rpx;
    }
    .tips {
      text-align: center;
      font-size: $uni-font-size-sm;
      color: $uni-text-color-999;
      .tel {
        color: #f75a3e;
      }
    }
  }
  ::v-deep .u-preview-wrap {
    width: 140rpx !important;
    height: 140rpx !important;
  }
  .btn-more {
    position: absolute;
    right: 30rpx;
    top: 20rpx;
  }
}
</style>